<template>
	<div class="description">
		<div class="descriptionTop">
			<div class="descriptionTopLeft">
				<img @click="back" src="../../../../../assets/images/后退.png" />
				<span>选择标签</span>
			</div>
			<span @click="save">保存</span>
		</div>
		<div class="descriptionBottom">
			<textarea v-model="description" maxlength="1000" placeholder="歌单介绍"></textarea>
		</div>
		<div class="descriptionText">
			{{description2}}
		</div>
	</div>
</template>

<script>
	export default {
		name: "description",
		data() {
			return {
				description: "",
				num: 1000
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			save() {
				this.$router.push({
					name: 'createedit',
					params: {
						arr3: this.description
					}
				})
			}
		},
		computed: {
			description2() {
				return this.num - this.description.length
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.description {
		.descriptionTop {
			padding: vw(10) vw(20) vw(10) vw(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.descriptionTopLeft {
				font-size: 0;
				display: flex;
				align-items: center;
				img {
					width: vw(22);
					height: vw(22);
				}
				span {
					font-size: vw(16);
					line-height: vw(16);
					color: #5a5a5a;
					margin-left: vw(10);
				}
			}
			span {
				font-size: vw(16);
				line-height: vw(16);
				color: #5a5a5a;
			}
		}
		.descriptionBottom {
			width: 100%;
			height: 80vh;
			padding-bottom: vw(20);
			border-bottom: 1px solid #f1f1f1;
			textarea {
				width: 100%;
				height: 100%;
				border: none;
			}
		}
		.descriptionText {
			margin: vw(10) vw(20) 0 0;
			text-align: right;
		}
	}
</style>